﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetDesktopItem.aspx.cs" Inherits="ZX.WebApp.DeskTop.SetDesktop.SetDesktopItem" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
    <!--CSS file (default YUI Sam Skin) -->
    <link rel="stylesheet" type="text/css" href="../../scripts/yui_2.9.0/build/container/assets/skins/sam/container.css" />
    <link rel="stylesheet" type="text/css" href="../../scripts/yui_2.9.0/build/button/assets/skins/sam/button.css" />
    <link rel="stylesheet" type="text/css" href="../../scripts/yui_2.9.0/build/layout/assets/skins/sam/layout.css" />
    <!--begin custom header content for this example-->

    <style type="text/css">
    .yui-skin-sam table {width: 100%;}
    #button-example-form fieldset, 
    #button-example-form fieldset div {
        border: 2px groove #ccc;
        margin: .5em;
        padding: .5em;
    }
    .yui-button#pushbutton2 button,
    .yui-button#pushbutton5 button, 
    .yui-button .Add button {
        background: url(../../button/assets/add.gif) center center no-repeat;
        text-indent: -4em;
        overflow: hidden;
        padding: 0 .75em;
        width: 2em;
        *margin-left: 4em;   /* IE only */
        *padding: 0 1.75em;  /* IE only */

    }    
    .yui-button#pushbutton3 button,
    .yui-button#pushbutton6 button, 
    .yui-button#pushbutton9 button {
        padding-left: 2em;
        background: url(../../button/assets/add.gif) 10% 50% no-repeat;
    }
</style>
    <!--end custom header content for this example-->
    <!-- Dependencies -->
    <script type="text/javascript" src="../../Scripts/yui_2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="../../Scripts/yui_2.9.0/build/element/element-min.js"></script>
    <!-- OPTIONAL: Get Utility (enables dynamic script nodes for DataSource) -->
    <script type="text/javascript" src="../../Scripts/yui_2.9.0/build/get/get-min.js"></script>
    <!-- OPTIONAL: Drag Drop (enables resizeable or reorderable columns) -->
    <script type="text/javascript" src="../../Scripts/yui_2.9.0/build/dragdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="../../scripts/yui_2.9.0/build/layout/layout-min.js"></script>
    <script type="text/javascript" src="../../scripts/yui_2.9.0/build/button/button-min.js"></script>
    <script type="text/javascript" src="../../scripts/yui_2.9.0/build/container/container-min.js"></script>
    
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.min.js"></script>
    <script src="../../Scripts/Public.js" type="text/javascript"></script>
    <script src="../../Scripts/ArrayToJson.js" type="text/javascript"></script>

</head>
<body class="yui-skin-sam">
    <form id="form1" runat="server">
    <div id="listpage">
        <div id="toolbar">
        </div>
        <div id="data">
            <div id="json">
                <table style="width: 100%; text-align: center;margin-top: 10px;">
                    <tr>
                        <td style="text-align:center;"><span>未选择桌面</span></td>
                        <td style="text-align:center;"></td>
                        <td style="text-align:center;"><span>已选择桌面</span></td>
                    </tr>
                    <tr> 
                        <td style="text-align:center; width:47%; margin-left:10px;"> 
                            <select 
                                id="leftSelect" 
                                name="unSelectColors" 
                                ondblclick="ListBox_Move('leftSelect','rightSelect');" 
                                onclick="GetCurrentFocusBox('leftSelect')" 
                                size="8" 
                                style="height: 400px; width: 100%;"></select> 
                            <div id="myAutoComplete" style="width: 100%; margin-top: 5px;">
                                <button id="btnAddNew" type="button" style="width: 65px;text-align: center">新增</button>
                                <button id="btnEdit" type="button" style="width: 65px;text-align: center">修改</button>
                                <button id="btnDelete" type="button" style="width: 65px;text-align: center">删除</button>
                            </div>
                        </td>
                        <td style="text-align:center; width:100px; margin:5px;">
                            <p><input type="button" value="上移" id="btnUp" onclick="UpDown('up');" /></p>
                            <p><input type="button" value="右移" id="btnLeftToRight" onclick="ListBox_Move('leftSelect','rightSelect');" /></p>
                            <p><input type="button" value="左移" id="btnRightToLeft" onclick="ListBox_Move('rightSelect','leftSelect');" /></p>
                            <p><input type="button" value="下移" id="btnDown" onclick="UpDown('down');" /></p>
                        </td>
                        <td style="text-align:center; width:47%; margin-right:10px;"> 
                            <select 
                                id="rightSelect" 
                                name="rightSelect" 
                                ondblclick="ListBox_Move('rightSelect','leftSelect');"
                                onclick="GetCurrentFocusBox('rightSelect')"
                                size="8" 
                                style="height: 400px; width: 100%;"></select> 
                            <div id="Div1" style="width: 100%; margin-top: 5px;">
                                <button id="btnSave" type="button" style="width: 60px;text-align: center">保存</button>
                                <button id="btnEdit2" type="button" style="width: 65px;text-align: center;">修改</button>
                            </div>
                        </td> 
                    </tr> 
                </table> 
            </div>
        </div>
    </div>
    <div id="dialog1" class="yui-pe-content">
        <div class="hd" style="text-align: left" id="DivDesktopName">桌模板数据编辑</div>
        <div class="bd">
            <iframe id="EditUIWindow" frameborder="0" src="" style="width: 100%; height: 100%;
                margin: 0px; padding: 0px;"></iframe>
        </div>
    </div>
    </form>
</body>
<script type="text/javascript">
    var focusListBox;
    var leftSelect = $("#leftSelect");
    var rightSelect = $("#rightSelect");
    var baseUrl = "SetDesktopItem.aspx";
    var returnData;
    var RoleID = getPar1("RoleID");

    (function () {
        RoleID = getPar1("RoleID");
        var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;
        Event.onDOMReady(function () {
            var layout = new YAHOO.widget.Layout({
                units: [
                    //{ position: 'top', height: 35, body: 'toolbar', gutter: '1 1 1 1', scroll: null, zIndex: 2 },
                    {position: 'center', body: 'data', gutter: '1 1', scroll: true }
                ]
            });
            layout.render();
        });
    })();

    YAHOO.example.init = function () {

        // "click" event handler for each Button instance
        function onButtonClick(p_oEvent) {
            YAHOO.log("You clicked button: " + this.get("id"), "info", "example1");
            switch (this.get("id")) {
                case "btnAddNew":
                    fnAdd();
                    break;
                case "btnEdit":
                    fnEdit();
                    break;
                case "btnDelete":
                    fnDelete();
                    break;
                case "btnSave":
                    fnSave();
                    break;
                case "btnEdit2":
                    fnEdit2();
                    break;
                default:
                    fnAdd();
                    break;
            }
        }

        YAHOO.util.Event.onContentReady("toolbar", function () {
            var btnAddNew = new YAHOO.widget.Button("btnAddNew");
            var btnEdit = new YAHOO.widget.Button("btnEdit");
            var btnDelete = new YAHOO.widget.Button("btnDelete");
            var btnSave = new YAHOO.widget.Button("btnSave");
            var btnEdit2 = new YAHOO.widget.Button("btnEdit2");
            btnAddNew.on("click", onButtonClick);
            btnEdit.on("click", onButtonClick);
            btnDelete.on("click", onButtonClick);
            btnSave.on("click", onButtonClick);
            btnEdit2.on("click", onButtonClick);
        });
    } ();

    //新增
    var fnAdd = function () {
        $("#DivDesktopName").text("新增桌面模板数据");
        var size = $("#leftSelect option:selected").size();

        //var url = "ModifyDeskTopTemp.aspx?Action=add&sort=" + size + "&r=" + Math.random();
        var url = "../Form/DesktopConfig.aspx?Action=add&sort=" + size + "&ModelName=TempDeskTop&r=" + Math.random();

        document.getElementById("EditUIWindow").src = url;
        YAHOO.example.container.dialog1.show();
    }
    //编辑
    var fnEdit = function () {
        $("#DivDesktopName").text("编辑桌面模板数据");
        var size = $("#leftSelect option:selected").size();
        if (size > 0 && size < 2) {

            //var url =  "ModifyDeskTopTemp.aspx?Action=edit&DeskTopTempID=" + leftSelect.val() + "&sort=" + size + "&r=" + Math.random();
            var url = "../Form/DesktopConfig.aspx?Action=edit&ID=" + leftSelect.val() + "&ModelName=TempDeskTop&sort=" + size + "&r=" + Math.random();

            document.getElementById("EditUIWindow").src = url;
            YAHOO.example.container.dialog1.show();
        }
        else {
            if (size <= 0) alert("请选择需要修改的数据");
            if (size > 1) alert("只能选择一行数据");
        }
    }
    //修改后更新所修改文本
    var refreshForSelected = function (txt) {
        var obj = $("#leftSelect option:selected")
        obj.text(txt);
    }
    //修改后更新所修改文本
    var refreshForSelected2 = function (txt) {
        var obj = $("#rightSelect option:selected")
        obj.text(txt);
    }
    //删除
    var fnDelete = function () {
        var obj = $("#leftSelect option:selected")
        var url = "SetDesktopItem.aspx?Action=Delete&r=" + Math.random();
        if (obj.length < 0) { alert("请选择要删除的数据"); return false; }

        if (window.confirm("确认删除所选数据?") == true) {
            $.post(url, { "DeskTopTempID": obj.val() }, function (result) {
                alert(result);
                loadTemplateList();
            }, "json");
        }
    }

    var SysRoleDesktopObj = function () {
        RoleDesktopID="",
        DeskTopTempID = "",
        RoleId = "",
        Sort = ""
    }

    //保存
    var fnSave = function () {
        var options = $('#rightSelect').get(0).options;
        var arrayObj = new Array();
        $.each(options, function (i, own) {
            
            var tempObj = new SysRoleDesktopObj();
            tempObj.RoleDesktopID = $(own).val();
            tempObj.DeskTopTempID = $(own).attr("DeskTempID");
            tempObj.RoleId = RoleID;
            tempObj.Sort = i;
            arrayObj.push(tempObj);
        });
        
        var postObj = arrayToJson(arrayObj);
        $.post("SetDesktopItem.aspx?r=" + Math.random(), { "PostData": postObj, "Action": "AddRoleDeskTop", "RoleID": RoleID }, function (result) {

            loadTemplateList();
            loadRoleDesktopList();

            alert(result)
        }, "json")
    };
    
    //编辑2
    var fnEdit2 = function () {

        var size = $("#rightSelect option:selected").size();
        if (size > 0 && size < 2) {
            $.post("SetDesktopItem.aspx?r=" + Math.random(), { "Action": "CheckData", "RoleID": RoleID, "RoleDesktopID": rightSelect.val() }, function (result) {
                if (result == "true") {
                    $("#DivDesktopName").text("编辑角色桌面数据");
                    // document.getElementById("EditUIWindow").src = "ModifyDeskTop.aspx?RoleDesktopID=" + rightSelect.val() + "&RoleID=" + RoleID + "&r=" + Math.random();

                    var url = "../Form/DesktopConfig.aspx?Action=edit&ID=" + rightSelect.val() + "&RoleID=" + RoleID + "&ModelName=RoleDeskTop&sort=" + size + "&r=" + Math.random();
                    document.getElementById("EditUIWindow").src = url;
                    YAHOO.example.container.dialog1.show();
                }
                else {
                    alert("该数据未保存到角色桌面表中，无法执行修改操作，请先保存");
                }
            }, "json")
        }
        else {
            if (size <= 0) alert("请选择需要修改的数据");
            if (size > 1) alert("只能选择一行数据");
        }
    }
    //关闭窗口
    function closeWin() {
        YAHOO.example.container.dialog1.hide();
    }

    YAHOO.namespace("example.container");
    YAHOO.util.Event.onDOMReady(function () {
        var handleSubmit = function () {
            var editwindow = document.getElementById("EditUIWindow");
            if (editwindow) {
                editwindow.contentWindow.Modify();
            }
        };
        var handleCancel = function () {
            this.cancel();
        };
        var handleSuccess = function (o) {
            var response = o.responseText;
            response = response.split("<!")[0];
            document.getElementById("resp").innerHTML = response;
        };
        var handleFailure = function (o) {
            alert("Submission failed: " + o.status);
        };
        YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");
        // Instantiate the Dialog

        var w = $(window).width() - 45;
        var h = 355;
        YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
							    { width: w + "px",
							        height: h + "px",
							        fixedcenter: true,
							        visible: false,
							        constraintoviewport: true,
							        buttons: [{ text: "保存", handler: handleSubmit, isDefault: true },
								          { text: "取消", handler: handleCancel}]
							    });
        YAHOO.example.container.dialog1.validate = function () {
            var data = this.getData();
            if (data.firstname == "" || data.lastname == "") {
                alert("Please enter your first and last names.");
                return false;
            } else {
                return true;
            }
        };

        YAHOO.example.container.dialog1.callback = { success: handleSuccess,
            failure: handleFailure
        };
        YAHOO.example.container.dialog1.render();
        YAHOO.util.Event.addListener("btnAddNew", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
    });

    //var sText = $(own).text();
    //var sValue = $(own).val();
    //$("#" + listto).append("<option value=\"" + sValue + "\">" + sText + "</option>");
    //$(own).remove();

    $(document).ready(function () {
        loadTemplateList();
        loadRoleDesktopList();
    });
    var loadTemplateList = function () {
        leftSelect.html("");
        $.getJSON(baseUrl + "?r=" + Math.random(), { "Action": "GetDeskTopTemplateList","RoleID":RoleID }, function (data) {
            if (data != null && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    // data[i].title
                    leftSelect.append("<option DeskTempID=" + data[i].DeskTopTempID + " value=\"" + data[i].DeskTopTempID + "\">" + data[i].DeskTopTempName + "</option>");
                }
            }
        });
    }
    var loadRoleDesktopList = function () {
        rightSelect.html("");
        $.getJSON(baseUrl + "?r=" + Math.random(), { "Action": "GetSysRoleDesktopList", "RoleID": RoleID }, function (data) {
            if (data != null && data.length > 0) {
                for (var i = 0; i < data.length; i++) {
                    rightSelect.append("<option DeskTempID=" + data[i].DeskTopTempID + " value=\"" + data[i].RoleDesktopID + "\">" + data[i].DeskTopName + "</option>");
                }
            }
        });
    }
    function ListBox_Move(listfrom, listto) {
        var size = $("#" + listfrom + " option").size();
        var selsize = $("#" + listfrom + " option:selected").size();
        if (size > 0 && selsize > 0) {
            $.each($("#" + listfrom + " option:selected"), function (i, own) {
                $(own).appendTo($("#" + listto));
                // $("#" + listfrom + "").children("option:first").attr("selected", true);
            });
        }
    }
    function GetCurrentFocusBox(obj) {
        focusListBox = obj;
    }
    function UpDown(action) {
        ListBox_Order(focusListBox, action);
    }
    function ListBox_Order(ListName, action) {
        var size = $("#" + ListName + " option").size();
        var selsize = $("#" + ListName + " option:selected").size();
        if (size > 0 && selsize > 0) {
            $.each($("#" + ListName + " option:selected"), function (i, own) {
                if (action == "up") {
                    $(own).prev().insertAfter($(own));
                }
                else if (action == "down")//down时选中多个连靠则操作没效果
                {
                    $(own).next().insertBefore($(own));
                }
            })
        }
    }
</script>

</html>

